<template>
  <cdCustomNavbar :title="title" @confirm="confirm" />
  <view class="container">
    <view class="button-container">
      <uv-button
        type="success"
        :hairline="true"
        color="#53A658"
        shape="circle"
        customTextStyle="font-weight: bolder;"
        text="历史记录"
        @click="goToHistroy"
      ></uv-button>
    </view>
    <view class="pzsb" @click="takePhoto">
      <image
        class="zpsbImg"
        src="https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/pzsb.png"
        mode="aspectFit"
      ></image>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'
const takePhoto = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original'],
    sourceType: ['camera', 'album '],
    async success(res) {
      const tempFile = res.tempFilePaths[0] //获得图片临时路径
      navigateToResult(tempFile) //直接跳转到结果页面
    },
  })
}
const navigateToResult = (tempFile) => {
  // 假设跳转到名为PlantDetail的页面，传递识别结果参数
  uni.navigateTo({
    url: `/pages/result/result?tempFile=${tempFile}`,
  })
}
const goToHistroy = () => {
  uni.navigateTo({
    url: `/pages/history/history?type=cls`,
  })
}
</script>

<style>
page {
  background-image: url(https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/background2.png);
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 60vh;
  padding-top: 20vh;
  position: relative;
}

.button-container {
  position: absolute;
  top: 20px;
  right: 20px;
}

.image {
  width: 300px;
  height: 300px;
}

.result {
  margin-top: 20px;
}

.pzsb {
  width: 150px;
  display: flex;
  height: 150px;
  /* border: 1px solid #ccc; */
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  background-color: #53a658;
}

.zpsbImg {
  width: 85px;
  height: 85px;
}
</style>
